<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数配置</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索区 -->
      <el-form
        ref="searchFormRef"
        :inline="true"
        :model="queryInfo.query"
        size="mini"
      >
        <el-form-item label="关键字" prop="keyword">
          <el-input
            v-model="queryInfo.query.keyword"
            placeholder="请输入ID或者配置键名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="theme-background-color"
            size="mini"
            @click="searchList"
          >
            搜索
          </el-button>
          <el-button size="mini" @click="resetSearchForm"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <!-- 操作区域 -->
      <div>
        <el-button
          class="theme-background-color"
          icon="el-icon-plus"
          size="mini"
          @click="addParamConfig"
        >
          添加
        </el-button>
      </div>
      <!-- 列表区域 -->
      <el-table :data="list" border stripe>
        <!-- <el-table-column label="序号" type="index"></el-table-column> -->
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="配置标题" prop="info"></el-table-column>
        <el-table-column label="配置键名" prop="code"></el-table-column>
        <el-table-column label="配置类型" prop="type">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">字符串</span>
            <span v-if="scope.row.type == 2">数字</span>
            <span v-if="scope.row.type == 3">数组</span>
          </template>
        </el-table-column>
        <el-table-column label="配置值" prop="value"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="editParamConfig(scope.row)">
              编辑
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 编辑定价规则弹窗 -->
    <paramConfigAdd
      :formData="formData"
      :paramConfigAddDialogVisible.sync="paramConfigAddDialogVisible"
    ></paramConfigAdd>
  </div>
</template>

<script>
import paramConfigAdd from './ParamConfigAdd.vue'
export default {
  components: { paramConfigAdd },
  data() {
    return {
      queryInfo: {
        query: {
          keyword: ''
        }
      },
      list: [],
      paramConfigAddDialogVisible: false,
      formData: {}
    }
  },
  created() {
    // 获取所有的数据
    this.getListData()
  },
  methods: {
    async getListData() {
      const { data: res } = await this.$http.post(
        '/admin/config/list',
        this.queryInfo
      )

      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.list = res.data.list
    },
    searchList() {
      this.getListData()
    },
    resetSearchForm() {
      //   console.log(this)
      this.$refs.searchFormRef.resetFields()
      this.getListData()
    },
    addParamConfig() {
      this.formData = {}
      this.paramConfigAddDialogVisible = true
    },
    editParamConfig(data) {
      this.formData = JSON.parse(JSON.stringify(data))
      this.paramConfigAddDialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
</style>
